<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flat UI Free</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="../../dist/css/vendor/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="../../dist/css/flat-ui.css" rel="stylesheet">

    <link rel="shortcut icon" href="../../dist/img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="../../dist/js/vendor/html5shiv.js"></script>
    <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<style>
    body {
        padding-bottom: 200px;
    }
</style>

<div class="container">
    <h4>Buttons</h4>

    <div class="row">
        <div class="col-md-12">
            <p>
                <!-- Standard gray button with gradient -->
                <button type="button" class="btn btn-default">Default</button>

                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                <button type="button" class="btn btn-primary">Primary</button>

                <!-- Indicates a successful or positive action -->
                <button type="button" class="btn btn-success">Success</button>

                <!-- Contextual button for informational alert messages -->
                <button type="button" class="btn btn-info">Info</button>

                <!-- Indicates caution should be taken with this action -->
                <button type="button" class="btn btn-warning">Warning</button>

                <!-- Indicates a dangerous or potentially negative action -->
                <button type="button" class="btn btn-danger">Danger</button>

                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                <button type="button" class="btn btn-link">Link</button>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                <button type="button" class="btn btn-primary btn-hg">Huge button</button>
                <button type="button" class="btn btn-default btn-hg">Huge button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                <button type="button" class="btn btn-default btn-lg">Large button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary">Default button</button>
                <button type="button" class="btn btn-default">Default button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-sm">Small button</button>
                <button type="button" class="btn btn-default btn-sm">Small button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
                <button type="button" class="btn btn-default btn-xs">Extra small button</button>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
                <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                <a class="btn btn-default" href="#">Link</a>
                <button class="btn btn-default" type="submit">Button</button>
                <input class="btn btn-default" type="button" value="Input">
                <input class="btn btn-default" type="submit" value="Submit">
            </p>
        </div>
    </div>
    <h4>Button Groups</h4>

    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-group">
                <button type="button" class="btn btn-default">Left</button>
                <button type="button" class="btn btn-default">Middle</button>
                <button type="button" class="btn btn-default">Right</button>
            </div>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <button class="btn btn-default" type="button">1</button>
                    <button class="btn btn-default" type="button">2</button>
                    <button class="btn btn-default" type="button">3</button>
                    <button class="btn btn-default" type="button">4</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">5</button>
                    <button class="btn btn-default" type="button">6</button>
                    <button class="btn btn-default" type="button">7</button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-default" type="button">8</button>
                </div>
            </div>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-toolbar">
                <div class="btn-group btn-group-lg">
                    <button class="btn btn-default" type="button">Left</button>
                    <button class="btn btn-default" type="button">Middle</button>
                    <button class="btn btn-default" type="button">Right</button>
                </div>
            </div>
            </p>
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <button class="btn btn-default" type="button">Left</button>
                    <button class="btn btn-default" type="button">Middle</button>
                    <button class="btn btn-default" type="button">Right</button>
                </div>
            </div>
            </p>
            <p>

            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-default" type="button">Left</button>
                    <button class="btn btn-default" type="button">Middle</button>
                    <button class="btn btn-default" type="button">Right</button>
                </div>
            </div>
            </p>
            <p>

            <div class="btn-toolbar">
                <div class="btn-group btn-group-xs">
                    <button class="btn btn-default" type="button">Left</button>
                    <button class="btn btn-default" type="button">Middle</button>
                    <button class="btn btn-default" type="button">Right</button>
                </div>
            </div>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-group">
                <button class="btn btn-default" type="button">1</button>
                <button class="btn btn-default" type="button">2</button>

                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                            id="btnGroupDrop1">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul aria-labelledby="btnGroupDrop1" role="menu" class="dropdown-menu">
                        <li><a href="#">Dropdown link</a></li>
                        <li><a href="#">Dropdown link</a></li>
                    </ul>
                </div>
            </div>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-group-vertical">
                <button class="btn btn-default" type="button">Button</button>
                <button class="btn btn-default" type="button">Button</button>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                            id="btnGroupVerticalDrop1">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul aria-labelledby="btnGroupVerticalDrop1" role="menu" class="dropdown-menu">
                        <li><a href="#">Dropdown link</a></li>
                        <li><a href="#">Dropdown link</a></li>
                    </ul>
                </div>
                <button class="btn btn-default" type="button">Button</button>
                <button class="btn btn-default" type="button">Button</button>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                            id="btnGroupVerticalDrop2">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul aria-labelledby="btnGroupVerticalDrop2" role="menu" class="dropdown-menu">
                        <li><a href="#">Dropdown link</a></li>
                        <li><a href="#">Dropdown link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                            id="btnGroupVerticalDrop3">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul aria-labelledby="btnGroupVerticalDrop3" role="menu" class="dropdown-menu">
                        <li><a href="#">Dropdown link</a></li>
                        <li><a href="#">Dropdown link</a></li>
                    </ul>
                </div>
                <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                            id="btnGroupVerticalDrop4">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul aria-labelledby="btnGroupVerticalDrop4" role="menu" class="dropdown-menu">
                        <li><a href="#">Dropdown link</a></li>
                        <li><a href="#">Dropdown link</a></li>
                    </ul>
                </div>
            </div>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-group btn-group-justified">
                <a class="btn btn-default" href="#">Left</a>
                <a class="btn btn-default" href="#">Middle</a>
                <a class="btn btn-default" href="#">Right</a>
            </div>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <a href="#fakelink" class="btn btn-primary"><i class="fui-list-columned"></i></a>
                    <a href="#fakelink" class="btn btn-primary"><i class="fui-list-numbered"></i></a>
                    <a href="#fakelink" class="btn btn-primary active"><i class="fui-list-thumbnailed"></i></a>
                    <a href="#fakelink" class="btn btn-primary"><i class="fui-list-small-thumbnails"></i></a>
                </div>
            </div>
            </p>
        </div>
    </div>
    <h4>Button dropdowns</h4>

    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">Default <span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Primary <span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">Success <span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button">Info <span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle" type="button">Warning <span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">Danger <span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-group">
                <button class="btn btn-default" type="button">Default</button>
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button class="btn btn-primary" type="button">Primary</button>
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button"><span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button class="btn btn-success" type="button">Success</button>
                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button"><span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button class="btn btn-info" type="button">Info</button>
                <button data-toggle="dropdown" class="btn btn-info dropdown-toggle" type="button"><span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button class="btn btn-warning" type="button">Warning</button>
                <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle" type="button"><span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            <div class="btn-group">
                <button class="btn btn-danger" type="button">Danger</button>
                <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button"><span
                        class="caret"></span></button>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <!-- /btn-group -->
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <button data-toggle="dropdown" type="button" class="btn btn-default btn-hg dropdown-toggle">
                        Huge button <span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
            </p>
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <button data-toggle="dropdown" type="button" class="btn btn-default btn-lg dropdown-toggle">
                        Large button <span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
            </p>
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <button data-toggle="dropdown" type="button" class="btn btn-default btn-sm dropdown-toggle">
                        Small button <span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
            </p>
            <p>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <button data-toggle="dropdown" type="button" class="btn btn-default btn-xs dropdown-toggle">
                        Extra small button <span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <!-- /btn-toolbar -->
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>

            <div class="btn-toolbar">
                <div class="btn-group dropup">
                    <button class="btn btn-default" type="button">Dropup</button>
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span
                            class="caret"></span></button>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <div class="btn-group dropup">
                    <button class="btn btn-primary" type="button">Right dropup</button>
                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button"><span
                            class="caret"></span></button>
                    <ul role="menu" class="dropdown-menu pull-right">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            </p>
        </div>
    </div>
</div>
<!-- /.container -->

</body>
</html>
